<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>购物车列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #ffffff;
        }

        .h10 {
            width: 100%;
            height: 0.5rem;
            display: -webkit-box;
            clear: both;
            background: #f5f5f5
        }

        #header_top {
            background: url(../../image/header_bg.png) no-repeat center !important;
            background-size: cover;
            color: #ffffff
        }

        #app .aui-list-header {
            background: #ffffff;
        }

        #app .aui-list-header div img {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            vertical-align: middle;
            margin-right: 0.4rem;
        }

        .clearfix::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .aui-media-list-item-inner label {
            width: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
        }

        .countNum {
            width: 50%;
            float: right;
            margin-left: 2rem;
        }

        .countNum input[type="number"] {
            width: 1.2rem;
            height: 1.2rem;
            border: 1px solid #cccccc;
            text-align: center;
            float: left;
            font-size: 0.6rem
        }

        .countNum input[type="button"] {
            padding: 0 0.5rem;
            height: 1.2rem;
            border: 1px solid #cccccc;
            text-align: center;
            float: left;
            font-size: 0.6rem
        }

        .countNum input[type="number"] {
            border-left: none;
            border-right: none;
        }

        .countNum input[disabled] {
            color: #ccc;
        }

        .aui-list-header .aui-list-item-arrow {
            position: relative;
            padding-right: 2rem;
        }

        .aui-list-header .aui-list-item-arrow::before {
            top: 40%;
            background: transparent;
            border: 1px solid #f23030;
            border-top: none;
            border-right: none;
        }

        .aui-list-header i {
            float: right;
            color: #666;
            font-size: 0.6rem;
            font-style: normal;
        }

        .aui-list .aui-list-item:active {
            background: #fff;
        }

        .aui-list-item-text .aui-list-item-arrow {
            width: 100%;
            background: #f5f5f5;
            position: relative;
            padding: 0.2rem;
        }

        .aui-list-item-text .aui-list-item-arrow::before {
            transform: rotate(315deg);
            -webkit-transform: rotate(315deg);
            top: 40%;
        }

        .aui-refresh-content {
            min-height: 100vh;
            padding-bottom: 2.5rem;
        }

        .price {
            color: #f23030;
            font-size: 1rem;
        }

        .makeSure_footer_pay_all {
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .aui-radio {
            width: 0.8rem;
            height: 0.8rem;
        }

        .aui-radio:checked {
            background-color: #ff0000;
            border: solid 1px #ff0000;
        }

        .noneData {
            text-align: center;
            font-size: 0.8rem;
            color: #666;
            margin-top: 1rem;
        }

        .aui-list .aui-list-item {
            background-size: 100% 0px;
            border-bottom: 1px solid #ddd
        }

        .test {
            border: 1px solid #f23030;
            color: #f23030;
            border-radius: 1rem;
            padding: 0.2rem 0.2rem 0.1rem 0.2rem;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="aui-refresh-content">
            <div class="aui-content " v-if="infoList.length > 0">
                <ul class="aui-list aui-media-list" v-for="(items, index) in infoList" :key="index">
                    <li class="aui-list-header" v-if="items.store_info" style="padding-left:2.25rem">
                        <div class="aui-list-item-label" style="position: absolute;left:0.75rem">
                            <input class="aui-radio" type="checkbox" name="radio" :checked="isTitleChecked(items)" @change="changeTitleChecked(items, $event)" />
                        </div>
                        <div class="aui-list-item-arrow" @click="openShop(items.store_info.name, items.store_info.store_id)">
                            <img :src="items.store_info.logo" alt=""><span class="test">{{items.store_info.name}}</span>
                        </div>
                        <i @click="delCart(index)">删除</i>
                    </li>
                    <li class="aui-list-item" v-for="(item, i) in items.goods" :key="i" v-if="items.goods" @click="getPriceCount">
                        <div class="aui-media-list-item-inner">
                            <!-- <label> -->
                            <div class="aui-list-item-label" style="float:left;width:2rem !important">
                                <input class="aui-radio" type="checkbox" name="radio" :value="item" v-model="items.selected" />
                            </div>
                            <div class="aui-list-item-media">
                                <div :style="'background:url('+item.logo_pic+') no-repeat center/cover;width:100%;height: 4rem;'"></div>
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title">{{item.goods_name}}</div>
                                </div>
                                <div class="aui-list-item-text" v-if="item.sku_status == 1">
                                    <div class="aui-list-item-arrow" style="padding-right: 1.5rem;" @click="buyNow(item, index, i)">{{item.skuinfo}}</div>
                                </div>
                                <div class="aui-info aui-margin-t-5">
                                    <div class="aui-info-item price" style="width: 50%">
                                        ￥{{item.price}}
                                    </div>
                                    <div class="aui-info-item" style="width: 50%">
                                        <div class="countNum clearfix">
                                            <input type="button" value='-' @click="setCart(item.cartid, 2, item)" :disabled="item.num <= 1 ? 'disabled' : false" />
                                            <input type="number" size='3' readonly v-model='item.num' />
                                            <input type="button" value='+' @click="setCart(item.cartid, 1, item)" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- </label> -->
                        </div>
                    </li>
                </ul>
            </div>
            <div class="aui-content" v-else>

                <h3 class="noneData">购物车暂无商品</h3>
            </div>
        </div>
        <div class="makeSure_footer_pay_all" style="text-align:left;align-items: left;" v-if="infoList.length > 0">
            <div class="aui-list-item-label slectAll" style="left:3%;width:20% !important; position:absolute;">
                <input type="checkbox" name="radio" class="aui-radio" style="width:1rem;height:1rem;vertical-align: middle;" :checked="isAllChecked()" @change="changeAllChecked($event)"> 全选
            </div>
            <div class="makeSure_footer_pay_all_text">总计：</div>
            <div class="makeSure_footer_pay_all_money">￥{{priceCount}}</div>
            <div class="makeSure_footer_pay_all_btn" @click="openOrder()">结算 ({{productCount}})</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {
        // if (!$api.getStorage('token')) {
        //   api.toast({ msg: '用户未登录',duration: 2000,location:'middle' });
        //   return
        // }
        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });
        var app = new Vue({
            el: '#app',
            data: {
                infoList: [],
                priceCount: '0.00',
                productCount: 0,
            },
            created: function() {
                var $this = this;
                // $this.addCart(82) //82 64
                console.log($api.getStorage('token'))
                $this.getCart()

                api.addEventListener({
                    name: 'changeCarlistItem'
                }, function(ret, err) {
                    $this.saveCart($this.infoList[ret.value.index].goods[ret.value.i].cartid, ret.value.sku.sku_id, ret.value.num)
                });
            },
            mounted: function() {
                var $this = this;
                // $this.getCart();
                api.hideProgress();
                var pullRefresh = new auiPullToRefresh({
                    container: document.querySelector('.aui-refresh-content'),
                    triggerDistance: 100
                }, function(ret) {
                    if (ret.status == "success") {
                        api.ajax({
                            url: window.Url.Freecart_cartList,
                            method: 'post',
                            data: {
                                values: {
                                    token: $api.getStorage('token')
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                if (ret.re != 2) {
                                    $this.infoList = ret.data;
                                } else {
                                    $this.infoList = [];
                                }
                                setTimeout(function() {
                                    $this.getPriceCount()
                                    console.log(JSON.stringify(ret.data))
                                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                                }, 500)
                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    }
                })
            },
            methods: {
                getPriceCount: function() {
                    var $this = this;
                    $this.priceCount = 0
                    $this.productCount = 0
                    $this.cartId = '-'
                    for (var i = 0; i < $this.infoList.length; i++) {
                        var selectList = $this.infoList[i].selected
                        for (var j = 0; j < selectList.length; j++) {
                            $this.priceCount += parseFloat(selectList[j].price) * selectList[j].num;
                            $this.productCount += Number(selectList[j].num);
                            $this.cartId += (selectList[j].cartid + '-')
                        }
                    }
                    $this.priceCount = parseFloat($this.priceCount).toFixed(2);
                },
                changeTitleChecked: function(data, event) {
                    var $this = this;
                    if (event.target.checked === true) {
                        data.goods.forEach(function(item) {
                            data.selected.indexOf(item) === -1 && data.selected.push(item);
                        })
                    } else {
                        data.selected = [];
                    }
                    $this.getPriceCount()
                },
                /**
                 * 判断父标题选择状态
                 * @param data [当前项的data]
                 * @returns {boolean}
                 */
                isTitleChecked: function(data) {
                    var $this = this;
                    var _selected = data.selected;
                    var _listItem = data.goods;
                    // 验证selected中是否含有全部的item的id 如果是 证明title要选中
                    return _listItem.every(function(item) {
                        return _selected.indexOf(item) != -1;
                    });
                },

                /**
                 * 全选框change事件的回调处理方法
                 * @param event
                 */
                changeAllChecked: function(event) {
                    var $this = this;
                    if (event.target.checked === true) {
                        $this.infoList.forEach(function(data) {
                            data.goods.forEach(function(item) {
                                data.selected.indexOf(item) === -1 && data.selected.push(item);
                            })
                        })
                    } else {
                        $this.infoList.forEach(function(data) {
                            data.selected = [];
                        })
                    }
                    $this.getPriceCount()
                },

                /**
                 * 判断全选框选择状态
                 * @returns {boolean}
                 */
                isAllChecked: function() {
                    var $this = this;
                    return $this.infoList.every(function(data) {
                        return data.selected.length === data.goods.length;
                    });
                },
                buyNow: function(info, index, i) {
                    api.openFrame({
                        name: 'purchase',
                        url: '../one_frame/purchase.html',
                        pageParam: {
                            type: 4,
                            info: info,
                            index: index,
                            i: i
                        }
                    })
                },
                getCart: function(fn) {
                    var $this = this;
                    api.ajax({
                        url: window.Url.Freecart_cartList,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token')
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            console.log(JSON.stringify(ret.data))
                            if (ret.re == 1) {
                                $this.infoList = ret.data
                                var num = 0
                                for (var i = 0; i < $this.infoList.length; i++) {
                                    for (var j = 0; j < $this.infoList[i].goods.length; j++) {
                                        num = num + Number($this.infoList[i].goods[j].num)
                                    }
                                }

                                api.sendEvent({
                                    name: 'cartNum',
                                    extra: {
                                        num: num,
                                    }
                                })
                            } else {
                                $this.infoList = []
                                api.sendEvent({
                                    name: 'cartNum',
                                    extra: {
                                        num: 0,
                                    }
                                })
                            }
                            fn && fn()
                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                },
                delCart: function(index) {
                    var $this = this;
                    // for (var i = 0; i < $this.infoList.length; i++) {
                    var selectList = $this.infoList[index].selected
                    if (selectList.length == 0) {
                        api.toast({
                            msg: '请选择产品',
                            duration: 2000,
                            location: 'middle'
                        });
                    }
                    for (var j = 0; j < selectList.length; j++) {
                        var cartID = selectList[j].cartid
                        api.ajax({
                            url: window.Url.Freecart_delCart,
                            method: 'post',
                            data: {
                                values: {
                                    token: $api.getStorage('token'),
                                    cartID: cartID
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                console.log(JSON.stringify(ret))
                                $this.getCart(function() {
                                    $this.getPriceCount()
                                })

                            } else {
                                api.alert({
                                    msg: JSON.stringify(err)
                                });
                            }
                        })
                    }
                    // }

                },
                addCart: function(id) {
                    var $this = this;
                    api.ajax({
                        url: window.Url.Freecart_joinCart,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                goodsId: id,
                                num: 1,
                                exchange_id: 74
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            api.toast({
                                msg: id + '添加成功',
                                duration: 2000,
                                location: 'middle'
                            });

                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                },
                setCart: function(id, type, x) {
                    var $this = this;
                    api.ajax({
                        url: window.Url.Freecart_setCart,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                cart_id: id,
                                set_type: type
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            console.log(JSON.stringify(ret))
                            if (ret.re == 1) {
                                // $this.getCart(function () {
                                //   $this.getPriceCount()
                                // })
                                if (type == 1) {
                                    x.num++;

                                } else if (type == 2) {
                                    x.num--;
                                }

                                var num = 0
                                for (var i = 0; i < $this.infoList.length; i++) {
                                    for (var j = 0; j < $this.infoList[i].goods.length; j++) {
                                        num = num + Number($this.infoList[i].goods[j].num)
                                    }
                                }

                                api.sendEvent({
                                    name: 'cartNum',
                                    extra: {
                                        num: num,
                                    }
                                })

                                $this.getPriceCount();

                            } else {
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'middle'
                                });
                            }
                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                },
                saveCart: function(id, sku_id, num) {
                    var $this = this;
                    api.ajax({
                        url: window.Url.Freecart_cartNumSave,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                cartID: id,
                                sku_id: sku_id,
                                num: num
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            console.log(JSON.stringify(ret))
                            if (ret.re == 1) {
                                $this.getCart(function() {
                                    $this.getPriceCount()
                                })
                            } else {
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'middle'
                                });
                            }
                        } else {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        }
                    })
                },
                openOrder: function() {
                    var $this = this;
                    if ($this.productCount <= 0) {
                        api.toast({
                            msg: '请选择产品',
                            duration: 2000,
                            location: 'center'
                        });
                        return;

                    }

                    api.openWin({
                        name: 'order',
                        url: './order.html',
                        pageParam: {
                            cartId: $this.cartId,
                            under_type: 2
                        }
                    });
                },
                openShop: function(name, id) {
                    api.openWin({
                        name: 'shop_inner',
                        url: '../two_frame/two_frame_header.html',
                        pageParam: {
                            type: 'shop_inner',
                            name: name,
                            id: id
                        }
                    })

                }
            }
        })
    }
</script>

</html>
